import {useState} from 'react'

import { Checkbox, Button, Popconfirm } from 'antd';

import './index.scss'


function Item(props) {
    const { id, isDone, name, deleteTodo, finishedChange } = props

    const [isHover, setIsHover] = useState(false)

    const handleDelete = () => {
        deleteTodo(id)
    }
    const handleChange = (e) => {
        // console.log(e.target.checked);
        finishedChange({
            id,
            name,
            isDone: e.target.checked
        })
    }

    const  handleEnter = () => {
        setIsHover(true)
    }
    const  handleLeave = () => {
        setIsHover(false)
    }

    return (
        <li className={`todo-item ${isHover ? 'current': ''}`} onMouseEnter={handleEnter} onMouseLeave={handleLeave}>
            <Checkbox onChange={handleChange} checked={isDone}>{name}</Checkbox>
            <Popconfirm
                title="警告"
                okText="确认"
                cancelText="取消"
                description={`确认删除${name}吗？`}
                onConfirm={handleDelete}
            >
                <Button type="primary" danger size='small'>删除</Button>
            </Popconfirm>
        </li>
    )
}

export default Item